<!-- *Author: 黄旗, *Date: 2020-08-04 15:45:59 -->
<template>
    <Modal :width="600" v-model='modal' title='编辑站点' transfer :mask-closable='false' @on-cancel='canceledit(modalname)' draggable>
        <Form :label-width='130' :ref='modalname' :model='modalparams' :rules='createRules'>
            <!-- <FormItem label='网站域名：' prop='domain'>
                <span>{{modalparams.domain}}</span> <Checkbox class="ivu-ml-16" v-model="check">绑定更多域名</Checkbox>
            </FormItem> -->
            <!-- <FormItem label='网站域名：' prop='domain'>
                <Input type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" style="width: 280px" clearable v-model='modalparams.domain' placeholder='绑定多个域名，1行1个域名' />
            </FormItem> -->
            <FormItem label='网站域名：' prop='domain'>
                <Input style="width: 280px" disabled v-model='modalparams.domain' placeholder='如 sxehao.com，域名结尾不要带反斜杠“/”' /> <Checkbox class="ivu-ml-16" v-model="check">绑定更多域名</Checkbox>
            </FormItem>
            <FormItem v-if="check" label='绑定更多域名：'>
                <Input @on-blur="textareaBlur" type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" style="width: 280px" clearable v-model='modalparams.other_domain' placeholder='绑定多个域名，1行1个域名' />
            </FormItem>
            <FormItem label='站点类型：' prop='site_type'>
                <RadioGroup v-model="modalparams.site_type">
                    <Radio :label="item.value" v-for="item of condition.site_type_list" :key="item.value">{{item.label}}</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem label='推广类型：' prop='extension_type'>
                <RadioGroup v-model="modalparams.extension_type">
                    <Radio :label="item.value" v-for="item of condition.extension_type_list" :key="item.value">{{item.label}}</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem label='数据库类型：' prop='db_type'>
                <RadioGroup v-model="modalparams.db_type" @on-change="changedbtype">
                    <Radio label="1">{{old_db_id>0?'原数据库':'新建数据库'}}</Radio>
                    <Radio label="2">共用数据库</Radio>
                    <Radio label="3">复用数据库</Radio>
                    <Radio label="4">无数据库</Radio>
                </RadioGroup>
            </FormItem>
            <!-- <FormItem v-if="modalparams.db_type==2||modalparams.db_type==3"  :label="modalparams.db_type == 2?'共用数据库:':'复用数据库:'" prop='db_site_id'>
                <Select v-model="modalparams.db_site_id" style="width:280px" filterable clearable>
                    <Option v-for="item in siteInfo.db_list" :value="item.id" :key="item.id">{{ item.domain }}</Option>
                </Select>
                <p><font class="red" v-if="modalparams.db_type == 2">注：当pc站和手机站共用1个数据库时，推荐选择此项</font></p>
                <p><font class="red" v-if="modalparams.db_type == 3">注：选择此项，会复制一份当前选择的域名数据库作为新域名数据库</font></p>
            </FormItem> -->
            <FormItem v-if="modalparams.db_type == 2" label='共用数据库：' prop='db_site_id' >
                <Select v-model="modalparams.db_site_id" style="width:280px" filterable clearable>
                    <Option v-for="item in siteInfo.db_list" :value="item.id" :key="item.id">{{ item.domain }}</Option>
                </Select>
                <p><font  style="color:#999;">注：当pc站和手机站共用1个数据库时，推荐选择此项</font></p>
            </FormItem>
            <FormItem v-if="modalparams.db_type == 3" label='复用数据库：' prop='db_site_id'>
                <Select v-model="modalparams.db_site_id" style="width:280px" filterable clearable>
                    <Option v-for="item in siteInfo.db_list" :value="item.id" :key="item.id">{{ item.domain }}</Option>
                </Select>
                <p><font   style="color:#999;">注：选择此项，会复制一份当前选择的域名数据库作为新域名数据库</font></p>
            </FormItem>
            <FormItem label='备注：'>
                <Input type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" style="width: 280px" clearable v-model='modalparams.remark' placeholder='请输入备注' />
            </FormItem>
        </Form>
        <div slot='footer'>
            <Button @click='canceledit(modalname)'>取消</Button>
            <Button type='primary' :loading="subloading" @click='submitedit(modalname)'>保存</Button>
        </div>
    </Modal>
</template>

<script>
    import { siteindexupdate, siteindexcreateinfo } from '@api/httpsetting'
    export default {
        props: ['condition'],
        name: '',
        data () {
            const validatedb_site_id = (rule, value, callback) => {
                this.log(this.modalparams.db_site_id)
                if (this.modalparams.db_site_id=='') {
                    callback(new Error('请选择数据库'));
                } else {
                    callback();
                }
            };
            return {
                db_type: undefined,
                db_site_id: undefined,
                old_db_id: undefined,
                show: true,
                modalname: 'modalname',
                modal: false,
                check: false,
                subloading: false,
                modalparams: { id: '', domain: '', site_type: '', extension_type: '', remark: '', db_type: '1', db_site_id: '' },
                createRules: {
                    // domain: [{ required: true, message: '请输入网站域名', trigger: 'blur' }],
                    domain: [{ required: true, validator: this.validatePass, trigger: 'blur' }],
                    site_type: [{ required: true, type: 'number', message: '请选择站点类型', trigger: 'change' }],
                    extension_type: [{ required: true, type: 'number', message: '请选择推广类型', trigger: 'change' }],
                    db_type: [{ required: true, message: '请选择数据库类型', trigger: 'change' }],
                    db_site_id: [{ required: true, validator: validatedb_site_id, trigger: 'change' }],
                    vps_id: [{ required: true, message: '请选择所属服务器', trigger: 'change' }]
                },
                siteInfo: {},
                other_domain:''
            };
        },
        /* 函数方法集合 */
        methods: {
            validatePass (rule, value, callback) {
                 let name=value.toLowerCase()
                if (name === '') {
                    callback(new Error('请输入网站域名'));
                } else if (name !== '') {
                    let arr = []
                    arr = name.split(',')
                    const domain = arr.map(item => {
                        return item.replace(/https?:\/\//gi, '').replace(/\/.*$/gi, '')
                    })
                    this.modalparams.domain = domain.join(',')
                    callback();
                } else {
                    callback();
                }
            },
            textareaBlur () {
                let arr = []
                let other_domain=this.modalparams.other_domain.toLowerCase()
                arr = other_domain.split('\n')
                const domain = arr.map(item => {
                    return item.replace(/https?:\/\//gi, '').replace(/\/.*$/gi, '')
                })
                this.modalparams.other_domain = domain.join('\n')
            },
            changedbtype (type) {
                this.modalparams.db_type=type
                // if(type==1||type==4){
                //     this.modalparams.db_site_id = ""
                // }
                this.modalparams.db_site_id = ""
                
            },
            /* @函数功能: 初始化 */
            initial (row) {
                this.$refs[this.modalname].resetFields();
                this.modalparams = { id: '', domain: '', other_domain: '', site_type: '', extension_type: '', remark: '',db_type: '1', db_site_id: ''  }
                this.check = false
                siteindexcreateinfo().then(res => {
                    this.siteInfo = res.condition
                    this.modal = true                    
                })
                this.askData(row)
            },
            askData (row) {
                this.check = (row.other_domain.length > 0)
                this.modalparams.id = row.id
                this.modalparams.domain = row.domain
                this.modalparams.other_domain = row.other_domain.join('\n')
                this.modalparams.site_type = +row.site_type
                this.modalparams.extension_type = +row.extension_type
                this.modalparams.remark = row.remark
                // this.modalparams.db_type = row.db_type == 3||row.db_type == 2||row.db_type ==4 ? row.db_type : '1'
                this.modalparams.db_type=row.db_type
                this.db_type = row.db_type
                this.old_db_id = row.old_db_id
                this.modalparams.db_site_id = row.share_site_id == '0' ? '' : row.share_site_id
                this.db_site_id = JSON.parse(JSON.stringify(this.modalparams.db_site_id))
            }, // 请求数据处理
            canceledit (name) {
                this.$refs[name].resetFields();
                this.modal = false
            },
            submitedit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.subloading = true
                        this.modalparams.domain = this.modalparams.domain.replace(/\s+/g, '')
                        // this.modalparams.other_domain = this.modalparams.other_domain.join(',').replace(/ /g, '')
                        //  2022/4/15注释，不存在3的情况
                        // if (this.modalparams.db_type == 1 && this.db_type != 2) {
                        //     this.modalparams.db_type = this.db_type
                        // }
                        if (!this.check) {
                            this.modalparams.other_domain = ''
                        }
                        let modalparams = JSON.parse(JSON.stringify(this.modalparams))
                        const other_domain=this.modalparams.other_domain.split('\n')
                        this.other_domain = other_domain.join(',').replace(/ /g, '')
                        // if (modalparams.db_type == 1) {
                        //     modalparams.db_site_id = ''
                        // } else if (modalparams.db_type == 3) {
                        //     modalparams.db_site_id = this.db_site_id
                        // }
                        modalparams.other_domain= this.other_domain
                        // modalparams.db_site_id = this.db_site_id
                        // if (modalparams.db_type == 1 && this.db_type == 3) {
                        //     modalparams.db_site_id = this.db_site_id
                        // } else if (modalparams.db_type == 1 && this.db_type != 3) {
                        //     modalparams.db_site_id = ''
                        // }
                        siteindexupdate(modalparams).then(() => {
                            this.$Message.success('修改成功')
                            this.$emit('askData')
                            this.subloading = false
                            this.modal = false
                        }).catch(() => {
                            this.subloading = false
                        })
                    }
                })
            }
        }
    }
</script>
